<template>
	<view>
		<view class="edgeInsetTop"></view>
		
		<form @submit="formSubmit">	
			<view class="cu-form-group padding-tb group-top">
				<view class="details">
					<view class="margin-bottom-sm">完成实名认证后可开通直播、申请提现、开通生活服务/电商带货等经营身份或使用其他需实名认证的功能或服务，
					也可找回你的账号或验证你账号的安全性。
					</view>
					<view class="margin-bottom-sm">你可以自主选择是否进行实名认证，未实名认证不影响你使用前述服务之外的其他服务。
					</view>
				</view>
			</view>
			<view class="cu-form-group">
				<view class="title">真实姓名</view>
				<input placeholder="请输入真实姓名" name="realName" v-model="name"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">身份证号</view>
				<input placeholder="请输入身份证号" name="IDnumber" v-model="IDcard"></input>
			</view>
			
			
			<view class="footer bg-white" style="position: absolute;bottom: 0;left: 0;">
				<view class="cu-form-group">
					<view class="details padding-tb">
						<view class="margin-bottom-sm">除真实姓名及身份证号外，为核验你提交的信息的真实性，我们在必要时会收集你的人脸验证，收集及处理方式可以在以下协议中查看
						</view>
					</view>
				</view>
				
				<!-- 同意服务条款 -->
				<checkbox-group :class="checked == 1 ? 'shake-horizontal' : ''" class="auth-clause" @change="CheckboxChange">
					<checkbox class="orange" :class="checked == 2 ? 'checked' : ''" :checked="checked == 2 ? true : false" value="2" />
					<view>
						我已阅读并同意<text @tap="onDetails($store.state.common.appConfig.user_agreement, '用户协议')">实名认证服务协议</text>
					</view>
				</checkbox-group>
				
				<view class="padding-bj flex flex-direction">
					<button form-type="submit" class="cu-btn wanl-bg-redorange margin-tb lg">同意协议并认证</button>
				</view>
			</view>
			
		</form>

	</view>
</template>

<script>
	import graceChecker from '@/common/graceChecker';
	export default {
		computed: {
	
		},
		data() {
			return {
				name:'',
				IDcard:'',
				checked: 0
			}
		},
		onLoad() {
			
			
		},
		methods: {
			CheckboxChange(e) {
				this.checked = e.detail.value;
			},
			formSubmit: function(e) {
				//定义表单规则
				console.log(e.detail.value)
				let rule = [
					{name: 'name', checkType: 'string', checkRule: '3,32', errorMsg: '真实姓名，至少3-12字符'},
					{name: 'IDcard', checkType: 'string', checkRule: '13,15', errorMsg: '身份证号，至少3-15字符'}
				];
				//进行表单检查
				let formData = e.detail.value;
				let checkRes = graceChecker.check(formData, rule);
				// 进行人脸认证
				if (checkRes) {
				
				} else {
					this.$wanlshop.msg(graceChecker.error);
				}
			}
			
		}
	}
</script>

<style>
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
	.group-top{
		border: none !important;
	}
</style>
